<template>

<div class="ndbox">
    <div class="wdtop">
        <div class="ndtxbox">
        <img class="wdtx" :src='this.nd.User_tx' alt="" preview="ndtx" preview-text="">
        <div>
        <button class="ndbt" @click="$router.push('/chatbody/' + nd.User_id);">私信</button>
        <button class="ndbt" @click="gz(nd.User_id)">{{gzbt}}</button>    
        </div>
        </div>
            <div class="wdnn">
                <span class="W_name">{{this.nd.User_name}}</span>&nbsp;&nbsp;
                <img :src='ndsex' alt="" width="20" height="20">&nbsp;&nbsp;
                <img src="static/img/Lv0.png" alt="" height="20">
            </div>
            <div>
                <span class="wdid">ID:{{this.nd.User_id}}</span>
            </div>
            <span class="wdintro">书签：{{this.nd.User_intro}}</span>
            <div class="wddz">
                <span @click="showDialogStyle = true">{{this.nd.Like}}点赞</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <div v-transfer-dom>
                <x-dialog v-model="showDialogStyle" hide-on-blur >
                <div style="text-align:center;background-image: url('../..//static/img/dzbg.jpg');background-size:300px 200px;" @click="showDialogStyle = false">
                <br><br>
                <span>{{this.nd.User_name}}  获赞数</span>
                <br><br>
                <p style="font-size:30px;font-weight: bolder;">{{this.nd.Like}}</p>
                <br>
                <x-icon type="ios-close-outline"></x-icon>
                </div>
                </x-dialog>
                </div>

                <span>{{formatLength(nd.Flow)}}关注</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>{{formatLength(nd.Friend)}}粉丝</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
    </div>
    
<div>
<sticky  :check-sticky-support="false" :offset="0">
<tab>
<tab-item  @on-item-click="showtzpl=true" @click.native="showtzpl=true" selected>帖子</tab-item>
<tab-item  @on-item-click="showtzpl=false" @click.native="showtzpl=false">评论</tab-item>
</tab>
</sticky>
<ntz v-if="showtzpl" :tid="id"></ntz>
<npl v-else :pid="id"></npl>
<!-- <router-view $router.push('/Nd')/> -->
</div>

</div>

</template>
<script>
import ntz from './upost'
import npl from './upl'
export default {
  components:{ntz,npl},
  data () {
    return {
        showDialogStyle: false,
        ndsex:'static/img/sex.png',
        nd:{},
        id:this.$route.params.id,
        showtzpl:true,
        flow:this.$store.state.wd.wdflow,
        myid:this.$store.state.wd.wdid,
        gzbt:'+关注',
    }
  },
  methods: {
      formatLength(arr) {
          if(arr) {
              return arr.length
          }
      },
      getnd(){
        this.$http.post("http://localhost:3000/users/Autologin",
        {
        User_id:this.id,
        },{emulateJSON: true})
        .then(
        (response)=>{
            this.nd=response.data.msg.user;
            this.$vux.loading.hide();
        },
        (error)=>{
        console.log(error);
        }
        );
      },
      gz(id){
        let index = this.flow.indexOf(id);
        if (index > -1) {
          this.flow.splice(index, 1);
          this.gzbt = '+关注';
          this.$http.post("http://localhost:3000/users/removeflow",
            {
                id:this.myid,
                fid:this.id,
            },{emulateJSON: true})
            .then(
            (response)=>{
            },
            (error)=>{
            console.log(error);
            }
            );
            this.$vux.toast.show({
                type: 'text',
                text: '取消关注',
                position: 'middle',
                time: '1000'
                })
        }
        else{
          this.flow.push(id);
          this.gzbt = '取消关注';
          this.$http.post("http://localhost:3000/users/addflow",
            {
                id:this.myid,
                fid:this.id,
            },{emulateJSON: true})
            .then(
            (response)=>{
            },
            (error)=>{
            console.log(error);
            }
            );
            this.$vux.toast.show({
                type: 'text',
                text: '关注成功',
                position: 'middle',
                time: '1000'
                })
        }
      },
      gzbtt(){
          if (this.flow.indexOf(this.id) > -1) {
              this.gzbt='取消关注'
          }
          else{
              this.gzbt='+关注'
          }
      }
  },
  mounted(){
      this.$vux.loading.show();
      this.getnd();
      this.gzbtt();
  },
  
}
</script>
<style scoped>
.wline{
text-decoration:none;
color:aliceblue;
}
.wdbox{
    display: flex;
    flex-direction: column;
    height: 700px;
}
.wdtop{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    background-image: url('../../static/img/bg.png');
    background-size:cover;
}

.wdtx{
    background-color: aliceblue;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin-right: 20px;
}
.wdnn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    color:white;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
.W_name{
    max-width: 240px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.wdid{
    background-color: rgba(36, 36, 36, 0.678);
    color:white;
    font-size: 12px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.wddz{
    margin-top: 10px;
    color:white;
}
.wdintro{
    color:white;
    font-size: 14px;
}
.ndtxbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ndbt{
    height: 30px;
    white-space:nowrap; 
    background-color:rgba(255, 255, 255, 0);
    color:white;
    border: 2px solid white;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;
}
</style>
